<template>
	<div ref="wrap" class="node-erver">
		<div ref="header" class="selete-condition">
			<el-form :inline="true" :model="selectForm" @submit.prevent>
				<el-form-item label="关键字">
					<el-input v-model="selectForm.searchKey" placeholder="输入关键字查询" @keyup.enter="handerSearch" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="getUserList">查询</el-button>
					<el-button @click="(showDrawer = true)">查看</el-button>
					<el-button @click="toAddCustomer">新增</el-button>
				</el-form-item>
			</el-form>
		</div>
		<el-table
			ref="table"
			v-loading="tableLoading"
			class="table"
			stripe
			border
			:height="tableHeight"
			:data="tableData"
			empty-text="暂无数据"
			highlight-current-row
			@header-dragend="layoutTable"
		>
			<el-table-column
				label="序号"
				width="60"
				header-align="center"
				align="center"
				fixed="left"
				show-overflow-tooltip
			>
				<template #default="scope">
					<span>{{ ( selectForm.pageNo - 1) * selectForm.pageSize + scope.$index + 1 }}</span>
				</template>
			</el-table-column>
			<el-table-column
				label="姓名"
				prop="customerName"
				min-width="120"
				align="left"
				header-align="left"
				show-overflow-tooltip
			/>
			<el-table-column
				label="性别"
				prop="customerSex"
				min-width="80"
				align="left"
				header-align="left"
				show-overflow-tooltip
			/>
			<el-table-column
				label="手机号"
				min-width="140"
				align="left"
				header-align="left"
				show-overflow-tooltip
			>
				<template #default="scope">
					{{ filterHideStrFun(scope.row.customerPhone, 3, 4) }}
				</template>
			</el-table-column>

			<el-table-column
				label="地址"
				prop="customerAddress"
				min-width="180"
				align="left"
				header-align="left"
				show-overflow-tooltip
			/>
			<el-table-column
				label="说明"
				prop="remarks"
				min-width="200"
				align="left"
				header-align="left"
				show-overflow-tooltip
			/>
			<el-table-column
				label="操作"
				min-width="140"
				fixed="right"
				align="center"
				header-align="center"
			>
				<template #default="scope">
					<el-button link type="primary"  @click="editOneCustomer(scope.row, scope.$index)">
						<el-icon class="el-icon--left"><Edit /></el-icon>编辑
					</el-button>
					<el-button class="button--danger" link @click="delOneCustomer(scope.row, scope.$index)">
						<el-icon class="el-icon--right"><Delete /></el-icon>删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div
			ref="pageBar"
			class="page-bar"
		>
			<el-pagination
				v-model:pageSize="selectForm.pageSize"
				v-model:currentPage="selectForm.pageNo"
				background
				:page-sizes="[10, 20, 30, 40]"
				:pager-count="5"
				:prev-text="'上一页'"
				:next-text="'下一页'"
				:total="total"
				layout="total, sizes, prev,pager, next, jumper"
				class="pagination"
				@size-change="pageSizeChange"
				@current-change="pageNumChange"
			/>
		</div>

		<!-- 右侧抽屉 JSON编辑/查看插件 查看响应 -->
		<el-drawer v-model="showDrawer" direction="rtl" size="60%">
			<template #header>
				<h4>JSON编辑查看器</h4>
			</template>
			<template #default>
				<vue-json-editor
					v-model:value="apiResult"
					:show-btns="false"
					:mode="'code'"
					lang="zh"
					class="my-editor"
				/>
			</template>
		</el-drawer>

		<!-- 新增/修改 顾客信息 -->
		<edit-customer-dialog
			v-model:visible="showCustomerDialog"
			:customer-info="customerInfo"
			:customer-info-index="customerInfoIndex"
			:is-add="isAdd"
			@update-customer-info="updateCustomerInfo"
		/>
	</div>
</template>

<script setup name="NodeServer">
import vueJsonEditor from '@/components/VueJsonEditor'
import { queryUserList, delCustomer } from '@/api/myNodeSrverTest'
import { useLayoutTable } from '@/mixins/layoutTable'
import { filterHideStr } from '@/utils/utils'
import { ref, onMounted, getCurrentInstance } from 'vue'
import { ElMessage } from 'element-plus'
import editCustomerDialog from './components/editCustomerDialog'
const apiResult = ref({}) // 接口返回的整个对象
const tableData = ref([]) // 表格数据
const total = ref(0) // 总数
const tableLoading = ref(false) // 加载表格数据中
const selectForm = ref({ // 查询参数
	searchKey: '',
	pageNo: 1,
	pageSize: 10
})
const showDrawer = ref(false) // 右侧抽屉
const { tableHeight, layoutTable, resizeTableHeight } = useLayoutTable('wrap', 40) // 表格高度自适应
const filterHideStrFun = filterHideStr // 字符串脱敏
const isAdd = ref(true) // 是否是添加这操作
const showCustomerDialog = ref(false) // 弹窗显示状态
const customerInfo = ref({}) // 顾客信息
const customerInfoIndex = ref(-1) // 当前顾客下标

// Test  vue2 的 Vue.prototype
const that = getCurrentInstance(); // 获取内部组件实例 ≈ vue2的 this
console.log('that---', that.proxy.$NOWTIME())
onMounted(()=>{
	getUserList()
	resizeTableHeight.value()
})

/**
 * 调接口 --- 查用户列表
 */
const getUserList = async function() {
	try {
		tableLoading.value = true
		const params = {
			pageNo: selectForm.value.pageNo || 1,
			pageSize: selectForm.value.pageSize || 10,
			searchKey: selectForm.value.searchKey || ''
			// orderBy: selectForm.value.orderByType ? 'desc' : 'asc',
			// orderByKey: selectForm.value.orderByKey || 'update_time'
		}
		apiResult.value = await queryUserList(params)
		// tableData.value = apiResult.value.data
		// total.value = apiResult.value.data.length
		tableData.value = apiResult.value.data.list
		total.value = apiResult.value.data.total
		layoutTable.value()
		// console.log('apiResult.value--', apiResult.value)
	} catch (error) {
		console.log('Api error-', error)
	}
	tableLoading.value = false
}

/**
 * 修改
 */
function editOneCustomer(item,index) {
	isAdd.value = false
	customerInfo.value = item
	customerInfoIndex.value = index
	showCustomerDialog.value = true
}

// 更新顾客信息
function updateCustomerInfo(item, index) {
	if(!item && !index) {
		// 新增
		return getUserList()
	}
	tableData.value[index] = item
	customerInfo.value = item
}

/**
 * 新增
 */
function toAddCustomer() {
	isAdd.value = true
	customerInfo.value = {}
	customerInfoIndex.value = -1
	showCustomerDialog.value = true
}

/**
 * 删除
 */
async function delOneCustomer(item, index) {
	try {
		const res = await delCustomer({customerId: item.customerId})
		if(res.code === 200 && res.status === 200) {
			tableData.value.splice(index, 1)
			ElMessage.success(`删除${item.customerName}成功`)
		} else {
			ElMessage.warning(error.message || '系统内部错误')
		}
	} catch (error) {
		ElMessage.warning(error.message || '接口请求失败')
	}
}

function handerSearch() {
	selectForm.value.pageNo = 1
	selectForm.value.pageSize = 10
	getUserList()
}

/**
 * 切换每页条数时的回调
 * @param currentpageSize 每页条数
 */
function pageSizeChange(currentpageSize) {
	selectForm.value.pageSize = currentpageSize
	selectForm.value.pageNo = 1
	getUserList()
}

/**
 * 切换页码时的回调
 * @param currentPage 页码
 */
function pageNumChange(currentPage) {
	selectForm.value.pageNo = currentPage
	getUserList()
}
</script>
<style lang='scss' scoped>
.node-erver {
  height: 100%;
  padding: 20px;
	box-sizing: border-box;
  // overflow-x: hidden;
  // overflow-y: auto;
	overflow: hidden;
	/deep/ .el-form {
		.el-input__inner {
			max-width: 240px;
		}
	}

 // 表格样式
	/deep/ .el-table {
		//表头
		th.is-leaf {
			background: var(--theme-weaken-color-10) !important; // #f6f8fa;
			font-size: 14px;
			font-weight: 400;
			height: 40px;
			padding: 8px auto;
			box-sizing: border-box;
			color: rgba(81, 90, 110, 1);
  		border-bottom: 1px solid #dfe6ec !important;
		}
		//每一行
		td {
			height: 40px;
			padding: 0;
  		border-bottom: 1px solid #dfe6ec !important;
		}
		td, th {
			border-color: #dfe6ec;
		}
		//表格斑马线
		.el-table__body tr.el-table__row--striped {
			td {
				background: #f6f8fa !important;
			}
			&.hover-row td, &.current-row td {
				background: var(--theme-weaken-color-10) !important ;
			}
		}
		.el-table__row:hover td,
		.hover-row td,
		.current-row td {
			background: var(--theme-weaken-color-10) !important ;
		}
	}

.el-table--border::after,
.el-table--group::after,
.el-table::before,
.el-table__fixed-right::before,
.el-table__fixed::before {
  background: #dfe6ec;
}

// 弹窗组件
/deep/ .el-dialog {
	margin-bottom: 30px;
	.el-dialog__body {
		overflow-y: auto;
		padding-top: 0px;
	}
}

// 右侧抽屉
/deep/ .el-overlay {
	.el-drawer__header h4,
	.el-dialog__title {
		font-weight: bold;
    color: #333;
    font-size: 16px;
	}
	.el-drawer__header {
		margin-bottom: 20px;
	}
	.el-drawer__body {
		padding-top: 0;
		padding-bottom: 30px;
		overflow: auto;
	}
}

/deep/ .button--danger {
	color: #f56c6c !important;
	&:hover {
		color: #f78989 !important;
	}
}

// 分页组件公共样式
/deep/ .page-bar {
  .pagination {
    text-align: right;
    padding: 12px 0 0 !important;
    white-space: normal;
    .btn-prev {
      width: 6%;
    }
    .btn-next {
      width: 6%;
    }
  }
}

	.result {
		margin-top: 20px;
	}
}
</style>
